<template>
  <div class="member-order">
    <!-- <h3>订单列表</h3> -->
    <el-tabs
      v-model="activeName"
      style="height: 50px; line-height: 50px; padding: 10px"
      @tab-click="handleClick"
    >
      <el-tab-pane
        v-for="item in orderStatus"
        :key="item.name"
        :label="item.label"
        :name="item.name"
      ></el-tab-pane>
    </el-tabs>
    <div class="order-list">
      <OrderItem v-for="item in orderListInfo.items" :order="item"></OrderItem>
      <!-- <OrderItem></OrderItem>
      <OrderItem></OrderItem> -->
    </div>
  </div>
</template>

<script lang="ts" setup name="OrderList">
import { ref, watch } from "vue";
import { ApiRes } from "@/types/data";
import { OrderListInfo } from "@/types/order";
import OrderItem from "./components/order-item.vue";
import request from "@/utils/request";

// 订单状态
const orderStatus = [
  { name: "all", label: "全部订单" },
  { name: "unpay", label: "待付款" },
  { name: "deliver", label: "待发货" },
  { name: "receive", label: "待收货" },
  { name: "comment", label: "待评价" },
  { name: "complete", label: "已完成" },
  { name: "cancel", label: "已取消" },
];

const activeName = ref(orderStatus[0].name);
const orderState = ref(0);

const handleClick = ({ index }: any) => {
  // console.log(event);
  orderState.value = index;
};

const orderListInfo = ref({} as OrderListInfo);

watch(
  orderState,
  async (value) => {
    const res = await request.get<ApiRes<OrderListInfo>>("/member/order", {
      params: {
        orderState: value,
      },
    });

    orderListInfo.value = res.data.result;
  },
  { immediate: true }
);
</script>

<style scoped lang="less">
.member-order {
  background-color: #fff;
  // .el-tabs {
  //   background-color: #fff;
  // }
  .order-list {
    background-color: #fff;
    padding: 20px;
  }
}
</style>
